<template>
  <ul class="todo-main">
    <li
      v-for="(todo, index) in todos"
      :key="todo.id"
      @mouseenter="enterHandler(index)"
      :class="{ active: currentIndex == index }"
    >
      <label>
        <!--
           v-model:表单收集数据的，如果这里直接使用v-model,直接修改父组件的数据
           props:父组件给子组件传递数据(只读的),只可用，不能修改
           v-model:能读能改
           checked属性:事件元素发生变化时  如果是真 勾选上  如果是假的 不勾选

           表单元素的常用的事件:focus、blur、keydown、keyup、change等等
           单机事件可以与表单元素一起使用，但是很少这么书写的。
        -->
        <input
          type="checkbox"
          :checked="todo.done"
          @change="handler(todo, $event)"
        />
        <span>{{ todo.title }}</span>
      </label>
      <!-- 
        以后开发项目的时候:元素显示、隐藏 三种手段
        v-if:频繁创建DOM、移出DOM，很消耗性能
        v-show：通过样式display：none|block
        动态行内样式:最终要的就是对象写法
       -->
      <button class="btn btn-danger" v-show="todo.done" @click="clickHandler(todo.id)">
        删除
      </button>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      //currentIndex:存储当前鼠标进入的事件【吃饭、睡觉、打豆豆的】索引值
      currentIndex: -1,
    };
  },
  //第一种数组
  //第二种对象
  //第三种写法:下面这种写法,直接约束数据类型
  // props:{
  //    todos:Array
  // },
  props: ["todos", "updateDone","deleteTodo"],
  methods: {
    //   复选框事件的回调
    //第一个参数:能让你知道正在操作那个事情    第二个参数：能获取到复选框否选状态
    handler({ id }, e) {
      //调用父组件的方法，让父组件的方法修改自身的数据
      //第一个参数：告诉父组件，我正在修改那个事件
      //第二个参数：就是当前复选框的勾选的状态数值【true|false】
      this.updateDone(id, e.target.checked);
    },

    // 鼠标进人的事件回调
    enterHandler(index) {
      //当前组件实例存储鼠标进入这个元素的索引值
      //  console.log(index)
      this.currentIndex = index;
    },

    // 当亲删除按钮的回调
    clickHandler(id) {
       //子组件要调用父组件的方法，删除选中的那个事件
       this.deleteTodo(id);
    },
  },
};
</script>

<style>
.active {
  background: pink;
}
</style>